<template>
	<m-layout class="order" title="AI美食机" gap="0 24">
		<m-block class="dataBox flex-column mt-20 pt-200" bg-color="unset">
			<!-- 个人设备 -->
			<m-block class=" flex-column" bgColor="#fff" gap="24">
				<view class="flex-between">
					<view class="flex ai-baseline">
						<text class="point point1"></text>
						<text class="fs24 fw-600 ml-12">个人设备数据</text>
					</view>
					<view class=" fs24" @click="Jump('/pages/mine/myDevice/myDevice?wards=3')">
						<text>详情</text>
						<m-icon class="ml-12" size="24" color="#333" type="icon-qianjin" />
					</view>
				</view>
				<m-block class="flex mt-32">
					<view class=" flex-column ai-center flex-1">
						<view class="flex">
							<m-icon class="mr-4" size="30" type="set01" />
							<text class="fs24 text-grey">设备总数</text>
						</view>
						<view class="flex text-black fs30 fw-600 mt-4">
							<text>{{myTotal.selfcount2}}</text>
						</view>
					</view>
					<view class=" flex-column ai-center flex-1">
						<view class="flex">
							<m-icon class="mr-4" size="30" type="set02" />
							<text class="fs24 text-grey">已生效设备</text>
						</view>
						<view class="flex text-black fs30 fw-600  mt-4">
							<text>{{myTotal.selfValid}}</text>
						</view>
					</view>
					<view class=" flex-column ai-center flex-1">
						<view class="flex">
							<m-icon class="mr-4" size="32" type="set03" />
							<text class="fs24 text-grey">建设中设备</text>
						</view>
						<view class="flex text-black fs30 fw-600 mt-4">
							<text>{{myTotal.selfInst}}</text>
						</view>
					</view>
				</m-block>
				<m-block class="flex-between fs24 ptb-12 plr-24 mt-24" bgColor="#eaeaea" radius="8" @click="Jump('/pages/index/dataList/earningsDetail/earningsDetail?wards=3')"  >
					<view class="flex">
						<text>累计收入：</text>
						<text class="fs30 fw-600">{{Number(myTotal.c_5) + Number(myTotal.c_21) + Number(myTotal.c_22) | integer(2)}}</text>
					</view>

					<view class="flex fs21 ai-baseline">
						<text class="rewardDetail">全区数据</text>
					</view>
				</m-block>
			</m-block>
			<!-- 管理设备数据 -->
			<m-block class=" flex-column mt-20" bgColor="#fff" gap="24">
				<view class="flex ai-baseline">
					<text class="point point2"></text>
					<text class="fs24 fw-600 ml-12">管理设备数据</text>
				</view>
				<m-block class="flex mt-32">
					<view class=" flex-column ai-center flex-1">
						<view class="flex ">
							<m-icon class="mr-4" size="30" type="set01" />
							<text class="fs24 text-grey">设备总数</text>
						</view>
						<view class="flex text-black fs30 fw-600 mt-4">
							<text>{{myTotal.ztcount2}}</text>
						</view>
					</view>
					<view class=" flex-column ai-center flex-1">
						<view class="flex">
							<m-icon class="mr-4" size="30" type="set02" />
							<text class="fs24 text-grey">已生效设备</text>
						</view>
						<view class="flex text-black fs30 fw-600  mt-4">
							<text>{{myTotal.ztValid}}</text>
						</view>
					</view>
					<view class=" flex-column ai-center flex-1">
						<view class="flex">
							<m-icon class="mr-4" size="32" type="set03" />
							<text class="fs24 text-grey">建设中设备</text>
						</view>
						<view class="flex text-black fs30 fw-600 mt-4">
							<text>{{myTotal.ztInst}}</text>
						</view>
					</view>
				</m-block>
			</m-block>
			<!-- 区域代理 -->
			<m-block class=" flex-column  mt-20" bgColor="#fff" gap="24">
				<view class="flex ai-baseline">
					<text class="point point3"></text>
					<text class="fs24 fw-600 ml-12">区域代理数据</text>
				</view>
				<m-block class="flex mt-32 jc-space-between">
					<view class=" flex-column ai-center flex-1">
						<view class="flex">
							<m-icon class="mr-4" size="30" type="set01" />
							<text class="fs24 text-grey">设备总数</text>
						</view>
						<view class="flex text-black fs30 fw-600 mt-4">
							<text>{{myTotal.teamcount2}}</text>
						</view>
					</view>
					<view class="flex-column ai-center flex-1">
						<view class="flex ">
							<m-icon class="mr-4" size="30" type="set02" />
							<text class="fs24 text-grey">已生效设备</text>
						</view>
						<view class="flex text-black fs30 fw-600  mt-4">
							<text>{{myTotal.teamValid}}</text>
						</view>
					</view>
					<view class="flex-column ai-center flex-1">
						<view class="flex ">
							<m-icon class="mr-4" size="32" type="set03" />
							<text class="fs24 text-grey">建设中设备</text>
						</view>
						<view class="flex text-black fs30 fw-600 mt-4">
							<text>{{myTotal.teamInst}}</text>
						</view>
					</view>
				</m-block>
			</m-block>
			<!-- 奖励数据 -->
			<m-block class=" flex-column  mt-20" bgColor="#fff" gap="24">
				<view class="flex ai-baseline">
					<text class="point point4"></text>
					<text class="fs24 fw-600 ml-12">收益数据</text>
				</view>
				<m-block class="flex mt-32 " spa="0 24">
					<view class=" flex-1 flex-column ai-center"
						@click="Jump(`/pages/index/dataList/rewardDetail/rewardDetail?type=${20}`)">
						<text class="fs24 text-grey">累计分润收益</text>
						<view class="flex text-black fs30 fw-600 mt-4">
							<text>{{myTotal.c_5 | integer(2)}}</text>
							<m-icon class="ml-12" size="24" color="#333" type="icon-qianjin" />
						</view>
					</view>
					<view class=" flex-1 flex-column ai-center"
						@click="Jump(`/pages/index/dataList/rewardDetail/rewardDetail?type=${17}`)">
						<text class="fs24 text-grey">累计销售收益</text>
						<view class="flex text-black fs30 fw-600 mt-4">
							<text>{{myTotal.c_16 | integer(2)}}</text>
							<m-icon class="ml-12" size="24" color="#333" type="icon-qianjin" />
						</view>
					</view>
				</m-block>
				<m-block class="flex mt-32" spa="0 24">
					<view class="flex-1 flex-column ai-center"
						@click="Jump(`/pages/index/dataList/rewardDetail/rewardDetail?type=${18}`)">
						<text class="fs24 text-grey">累计管理收益</text>
						<view class="flex text-black fs30 fw-600 mt-4">
							<text>{{myTotal.c_11 | integer(2)}}</text>
							<m-icon class="ml-12" size="24" color="#333" type="icon-qianjin" />
						</view>
					</view>
					<view class="flex-1 flex-column ai-center"
						@click="Jump(`/pages/index/dataList/rewardDetail/rewardDetail?type=${19}`)">
						<text class="fs24 text-grey">累计代理收益</text>
						<view class="flex text-black fs30 fw-600 mt-4">
							<text>{{myTotal.c_12 | integer(2)}}</text>
							<m-icon class="ml-12" size="24" color="#333" type="icon-qianjin" />
						</view>
					</view>
				</m-block>
				<m-block class="flex mt-32" spa="0 24">
					<view class="flex-1 flex-column ai-center"
						@click="Jump(`/pages/index/dataList/rewardDetail/rewardDetail?type=${21}`)">
						<text class="fs24 text-grey">累计购物返利</text>
						<view class="flex text-black fs30 fw-600 mt-4">
							<text>{{myTotal.c_21 | integer(2)}}</text>
							<m-icon class="ml-12" size="24" color="#333" type="icon-qianjin" />
						</view>
					</view>
					<view class="flex-1 flex-column ai-center"
						@click="Jump(`/pages/index/dataList/rewardDetail/rewardDetail?type=${22}`)">
						<text class="fs24 text-grey">累计经销商奖励</text>
						<view class="flex text-black fs30 fw-600 mt-4">
							<text>{{myTotal.c_22 | integer(2)}}</text>
							<m-icon class="ml-12" size="24" color="#333" type="icon-qianjin" />
						</view>
					</view>
				</m-block>
			</m-block>
			<!-- 业绩数据 -->
			<m-block class=" flex-column  mt-20" bgColor="#fff" gap="24">
				<view class="flex ai-baseline">
					<text class="point point5"></text>
					<text class="fs24 fw-600 ml-12">业绩数据</text>
				</view>
				<m-block class="flex mt-32 " spa="0 24">
					<view class=" flex-1 flex-column ai-center">
						<text class="fs24 text-grey">个人业绩</text>
						<view class="flex text-black fs30 fw-600 mt-4">
							<text>{{myTotal.selfamount | integer(2)}}</text>
						</view>
					</view>
					<view class=" flex-1 flex-column ai-center">
						<text class="fs24 text-grey">管理业绩</text>
						<view class="flex text-black fs30 fw-600 mt-4">
							<text>{{myTotal.zta | integer(2)}}</text>
						</view>
					</view>
					<view v-if="Number(userinfo.dls)" class=" flex-1 flex-column ai-center">
						<text class="fs24 text-grey">代理业绩</text>
						<view class="flex text-black fs30 fw-600 mt-4">
							<!-- <text>{{(Number(myTotal.jta)+Number(myTotal.zta) )| integer(2)}}</text> -->
							<text>{{myTotal.teamamount| integer(2)}}</text>
						</view>
					</view>
				</m-block>
			</m-block>
		</m-block>
	</m-layout>
</template>

<script>
	import { mapState } from 'vuex';
	import { mytotalW3 } from "@/api/Users.js"
	export default {
		data() {
			return {
				myTotal: {}, //  我的个人业绩
			}
		},
		computed: {
			...mapState({
				userinfo: state => state.user.userinfo,
			}),
		},
		onShow() {
			this.$nextTick(() => {
				this.getMyTotal()
			});
		},
		methods: {
			async getMyTotal() {
				const { success, msg, data } = await mytotalW3();
				this.myTotal = data;
			},
		}
	}
</script>

<style lang="scss">
	.order {
		height: 100%;

		::v-deep.layout-content {
			// overflow: hidden;
			flex: 1;
			display: flex;
			flex-direction: column;
			background: url('../../../static/images/pages/index/dataBg.png') no-repeat;
			background-size: 100% 393rpx;
		}
	}

	.point {
		width: 10px;
		height: 10px;
		border-radius: 20rpx;
		opacity: 1;
	}

	.point1 {
		background: linear-gradient(319deg, #E2B900 0%, #FFE673 100%);
		box-shadow: 0px 2px 4px 0px rgba(255, 209, 0, 0.27);

	}

	.point2 {
		background: linear-gradient(319deg, #007AFF 0%, #A0CEFF 100%);
		box-shadow: 0px 2px 4px 0px rgba(0, 122, 255, 0.27);
	}

	.point3 {
		background: linear-gradient(319deg, #1ED400 0%, #A0FF90 100%);
		box-shadow: 0px 2px 4px 0px rgba(30, 212, 0, 0.27);
	}

	.point4 {
		background: linear-gradient(319deg, #FF0541 0%, #FF7999 100%);
		box-shadow: 0px 2px 4px 0px rgba(255, 5, 65, 0.27);
	}

	.point5 {
		background: linear-gradient(319deg, #5500ff 0%, #5500ff 100%);
		box-shadow: 0px 2px 4px 0px rgba(255, 5, 65, 0.27);
	}
	.rewardDetail{
		background-color: #ecc928;
		padding: 8rpx 24rpx;
		border-radius: 50rpx;
	}
</style>